<template>
  <div class="wrap">
    <div id="pieQt6" class="pieContainer"></div>
    <div class="text">
      <div style="color: #59bee1">
        <span>已接入</span>
        <span>117</span>
      </div>
      <div style="color: #474197">|</div>
      <div style="color: #8784b6">
        <span>未接入</span>
        <span>303</span>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      this.$nextTick(() => {
        this.echart = echarts.init(document.getElementById('pieQt6'))
        this.echart.setOption(this.option())
      })
    },
    option() {
      let option = {
        title: {
          text: '开福区',
          top: '12',
          left: 'center',
          textStyle: {
            color: '#2f2f2f',
            fontWeight: 'normal',
            fontSize: 16

          }
        },
        tooltip: {
          trigger: 'item'
        },
        width: 160,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            center: ['36%', '45%'],
            label: {
              normal: {
                position: 'inner',
                show: false
              }
            },
            data: [
              { value: 117, name: '已接入', itemStyle: { normal: { color: '#52b2dc' } } },
              { value: 303, name: '待接入', itemStyle: { normal: { color: '#474197' } } },

            ],
          }
        ]
      }
      return option
    }
  }
}
</script>

<style lang="less" scoped>
.pieContainer {
  width: 120px;
  height: 200px;
}
.wrap {
  position: relative;
  .text {
    height: 67px;
    width: 120px;
    font-size: 13px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;

    span {
      display: inline-block;
      line-height: 26px;
    }
  }
}
</style>